<template>
    <n-modal :modelValue:show="modelShow" :close-on-esc="closeOnEsc" :mask-closable="maskClosable" class="form_dialog">
        <n-spin :show="loading" :content-style="{ '--n-opacity-spinning': 1 }">
            <n-card :style="`width: ${cardWidth}px`" :title="title" :bordered="false" size="huge" role="dialog"
                aria-modal="true">
                <slot name="content"></slot>

                <template #footer>
                    <div class="form_footer" v-if="footerShow">
                        <n-space>
                            <n-button @click="emits('model:close')">取消</n-button>
                            <n-button type="primary" @click="emits('model:submit')">确认</n-button>
                        </n-space>
                    </div>
                </template>
            </n-card>
        </n-spin>
    </n-modal>
</template>

<script setup>
import { NModal, NCard, useMessage, NSpin, NSpace, NButton } from "naive-ui"

const emits = defineEmits(['model:close', 'model:submit'])

const props = defineProps({
    modelShow: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '标题'
    },
    cardWidth: {
        type: Number,
        default: 800
    },
    footerShow: {
        type: Boolean,
        default: true
    },
    closeOnEsc: {
        type: Boolean,
        default: true
    },
    maskClosable: {
        type: Boolean,
        default: true
    }
})
</script>

<style lang='less'></style>